import ReactDOM from "react-dom"
import { createElement } from "react"

import { nullFn,createElementFn} from "@monorepo/utils"

export function BigImgComponent({src,onDestroy}){
    function closeFn(event){
        nullFn(event)
        onDestroy()
    }
    return (
        <div className="comm-mark flex align-items justify-content-center" onClick={closeFn}>
            <img src={src} className="comm-alert-img" onClick={nullFn} />
        </div>
    )
}
export function bigImgAlert(src){
    const container=createElementFn()
    const root = ReactDOM.createRoot(container);
    root.render(
        createElement(
            BigImgComponent, 
            {
                src,
                onDestroy: () => {
                    // 销毁组件和 DOM 引用
                    root.unmount();
                    //页面销毁需要删除组件
                    document.body.removeChild(container);
                },
            }
        )
    );
}